<template>
    <page class="customer-service">
        <v-back/>
        <div class="scroll">
            <div class="image-logo">
                <img :src="showImg(system.companyIntroductionImageUrl)" class="logo"/>
            </div>
            <div class="contact-group">
                <div class="contact-item center">
                    <div class="label">
                        <img src="~@/assets/images/wx-icon.png" class="icon">
                        <span>客服微信</span>
                    </div>
                    <a class="wx">{{system.customerServiceWxNumber}}</a>
                </div>
                <div class="contact-item top">
                    <div class="label">
                        <img src="~@/assets/images/tel-icon.png" class="icon">
                        <span>联系电话</span>
                    </div>
                    <div class="tel">
                        <a v-if="system.phone" :href="`tel://${system.phone}`">{{system.phone}}</a>
                        <a v-if="system.phone2" :href="`tel://${system.phone2}`">{{system.phone2}}</a>
                        <a v-if="system.phone3" :href="`tel://${system.phone3}`">{{system.phone3}}</a>
                    </div>
                </div>
                <div class="contact-item center">
                    <div class="label">
                        <img src="~@/assets/images/time-icon.png" class="icon">
                        <span>工作时间</span>
                    </div>
                    <span class="work-time">{{splitDate(system.workBeginTime)}}-{{splitDate(system.workEndTime)}}</span>
                </div>
            </div>
        </div>
    </page>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
        computed: {...mapGetters(['system'])},
        methods: {
            splitDate(date){
                if(!date) return '';
                return date.slice(11);
            }
        }
    }
</script>

<style scoped lang="less">
    .customer-service{
        .scroll{
            flex: 1;
            overflow-y: auto;
            .image-logo{
                padding: 30px @padding;
                display: flex;
                align-items: center;
                justify-content: center;
                .logo{
                    width:1.1rem;
                }
            }
            .contact-group{
                margin-top: @padding;
                .contact-item{
                    padding: 10px @padding*2;
                    display: flex;
                    &.center{
                        align-items: center;
                    }
                    &.top{
                        align-items: flex-start;
                    }
                    .label{
                        display: flex;
                        align-items: center;
                        margin-right: @padding;
                        .icon{
                            width: .26rem;
                            height: .26rem;
                            margin-right: 10px;
                        }
                        span{
                            font-size: @big;
                            color: #000;
                        }
                    }
                    .wx{
                        color: @theme-color;
                        font-size: @large;
                    }
                    .work-time{
                        color: #3F3F3F;
                        font-size: @large;
                    }
                    .tel{
                        display: flex;
                        flex-direction: column;
                        a{
                            color: @theme-color;
                            font-size: @large;
                        }
                    }

                }
            }

        }
    }
</style>
